import React, { useState } from "react";
import { Drawer, Button } from "antd";
import { CloseOutlined } from "@ant-design/icons";
import PropTypes from "prop-types";
const DrawerComponent = ({ button, drawer, onStatusChange, children }) => {
  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
    button.onClick && button.onClick();
    onStatusChange && onStatusChange(true);
  };
  const onClose = () => {
    setOpen(false);
    drawer.onClose && drawer.onClose();
    onStatusChange && onStatusChange(false);
  };

  return (
    <>
      <Button {...button} onClick={showDrawer}>
        {button.label}
      </Button>
      <Drawer
        {...drawer}
        closeIcon={null}
        onClose={onClose}
        open={open}
        extra={<CloseOutlined style={{ cursor: "pointer" }} onClick={onClose} />}
      >
        {children}
      </Drawer>
    </>
  );
};
DrawerComponent.propTypes = {
  button: PropTypes.object,
  drawer: PropTypes.object,
  onStatusChange: PropTypes.func,
  children: PropTypes.node,
};

export default DrawerComponent;
